<template>
  <div class="app-container">
    <!-- 工具栏 -->
    <div class="tools-container">
      <div class="buttons">
        <el-button
          v-if="!isAdmin"
          type="primary"
          size="small"
          @click="handleAddClick"
        >设置预警阈值</el-button>
        <el-button
          type="primary"
          size="small"
          @click="handleDownClick"
        >导出报表</el-button>
      </div>
    </div>
    <div class="table">
      <Table
        class="common-form-box history-warn"
      />
    </div>
    <el-dialog title="导出报表" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rule">
        <el-form-item label="时间选择" prop="time">
          <el-date-picker
            v-model="form.time"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="timestamp"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handelClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Table from './components/Table.vue'
import { error_data_export } from '@/api/warning'
export default {
  components: {
    Table
  },
  data() {
    return {
      form: {
        time: ''
      },
      dialogFormVisible: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      rule: {
        time: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    isAdmin() {
      let flag
      localStorage.getItem('isAdmin') === 'true' ? flag = false : flag = true
      return flag
    }
  },
  mounted() {

  },
  methods: {
    handelClick() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.handleDown()
          this.dialogFormVisible = false
        }
      })
    },
    handleAddClick() {
      this.$router.push({
        name: 'SceneWarning'
      })
    },
    handleDownClick() {
      const start = Date.now() - 7 * 24 * 60 * 60 * 1000
      const end = Date.now()
      this.form.time = [start, end]
      this.dialogFormVisible = true
    },
    handleDown() {
      // error_data_export({
      //   startTime: this.timeSel[0],
      //   endTime: this.timeSel[1]
      // }).then(res => {
      //   console.log(res)
      // })
      window.open(
        `http://rootchen.top:8888/iot/data/error_data_export?startTime=${this.form.time[0]}&endTime=${this.form.time[1]}`,
        '_blank'
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
}
.buttons{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.table {
  width: 100%;
  height: 100%;
}
</style>
